<template>
  <div>
    <div class="messageCenter">
      <!-- 返回 -->
      <div class="back">
        <i
          class="iconfont icon-fanhui"
          @click="okk"
        ></i>
      </div>
      <!-- 文本 -->
      <div class="text">消息中心</div>
      <!-- 添加好友 -->
      <div
        class="person"
        @click="addFriend"
      >
        <i class="iconfont icon-add-friends_icon"></i>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search">
      <input
        class="input"
        type="text"
        placeholder="搜索联系人..."
      />
    </div>

    <div class="liaotian">

      <!--  服务通知  客服 助理 护工 老人 子女 -->
      <!-- ------------------------------------------------------------ -->

      <!-- 服务通知 -->
      <div
        class="inurse"
        @click="serverNotion"
      >
        <!-- 左边是头像 -->
        <div class="left-icon">
          <i
            class="iconfont icon-zu161"
            style="font-size:1.35rem;color:rgb(18,150,219)"
          ></i>
          <!-- <img class="avatar" src="@/assets/images/333.jpg"> -->
        </div>
        <!-- 右边是文字 -->
        <div class="right-text">

          <!-- 文字上面是名字和时间 -->
          <div class="up">
            <div class="name">服务通知</div>
            <div>
              <mt-badge
                style="margin-right:3px"
                size="small"
                color="red"
                type="error"
                v-if="message > 0 "
              >{{message}}</mt-badge><span class="time">{{mm}}月{{dd}}日 </span>
            </div>
          </div>
          <!-- 文字下面显示交流的信息 -->
          <div class="down">
            <div class="communication">[智能小i：最新发布文章《8个方法预防老人痴呆症》...]</div>
          </div>
        </div>
      </div>

      <!-- i护理客服 -->
      <div
        class="inurse"
        @click="toChatDetail"
      >
        <!-- 左边是头像 -->
        <div class="left-icon">
          <i
            class="iconfont icon-kefu"
            style="color:rgb(18,150,219)"
          ></i>
          <!-- <img class="avatar" src="@/assets/images/333.jpg"> -->
        </div>
        <!-- 右边是文字 -->
        <div class="right-text">
          <!-- 文字上面是名字和时间 -->
          <div class="up">
            <div class="name">i护理客服</div>
            <div class="time">5月20日</div>
          </div>
          <!-- 文字下面显示交流的信息 -->
          <div class="down">
            <div class="communication">[智能小i：最新发布文章《8个方法预防老人痴呆症》...]</div>
          </div>
        </div>
      </div>

      <!-- ------------------------------------------------------------ -->
      <!-- i护理客服 -->
      <div class="inurse">
        <!-- 左边是头像 -->
        <div class="left-icon">
          <img
            class="avatar"
            src="@/assets/images/77.jpg"
          >
          <!-- <i class="iconfont icon-shiliangzhinengduixiang" style="color:rgb(97,156,241)"></i> -->
        </div>
        <!-- 右边是文字 -->
        <div class="right-text">
          <!-- 文字上面是名字和时间 -->
          <div class="up">
            <div class="name">医生</div>
            <div class="time">5月20日</div>
          </div>
          <!-- 文字下面显示交流的信息 -->
          <div class="down">
            <div class="communication">您好，请问您最近身体状况如何？需要一些咨询帮助吗</div>
          </div>
        </div>
      </div>

      <!-- ------------------------------------------------------------ -->
      <!-- i护理客服 -->
      <div class="inurse">
        <!-- 左边是头像 -->
        <div class="left-icon">
          <img
            class="avatar"
            src="@/assets/images/222.jpg"
          >
          <!-- <i class="iconfont icon-laoyeye" style="color:rgb(180,226,251)"></i> -->
        </div>
        <!-- 右边是文字 -->
        <div class="right-text">
          <!-- 文字上面是名字和时间 -->
          <div class="up">
            <div class="name">江爷爷</div>
            <div class="time">5月20日</div>
          </div>
          <!-- 文字下面显示交流的信息 -->
          <div class="down">
            <div class="communication">谢谢医生的指导，我会暗示吃药，多注意饮食和作息的</div>
          </div>
        </div>
      </div>

      <!-- ------------------------------------------------------------ -->
      <!-- i护理客服 -->
      <div class="inurse">
        <!-- 左边是头像 -->
        <div class="left-icon">
          <img
            class="avatar"
            src="@/assets/images/67.jpg"
          >
          <!-- <i class="iconfont icon-laonainai" style="color:rgb(97,156,241)"></i> -->
        </div>
        <!-- 右边是文字 -->
        <div class="right-text">
          <!-- 文字上面是名字和时间 -->
          <div class="up">
            <div class="name">刘姥姥</div>
            <div class="time">5月20日</div>
          </div>
          <!-- 文字下面显示交流的信息 -->
          <div class="down">
            <div class="communication">请问你们那个i护理怎么使用呀，我刚注册，不太会用呢</div>
          </div>
        </div>
      </div>

      <!-- ------------------------------------------------------------ -->
      <!-- i护理客服 -->
      <div class="inurse">
        <!-- 左边是头像 -->
        <div class="left-icon">
          <img
            class="avatar"
            src="@/assets/images/nurse11.jpg"
          >
          <!-- <i class="iconfont icon-renwu" style="color:rgb(180,226,251)"></i> -->
        </div>
        <!-- 右边是文字 -->
        <div class="right-text">
          <!-- 文字上面是名字和时间 -->
          <div class="up">
            <div class="name">护工</div>
            <div class="time">5月20日</div>
          </div>
          <!-- 文字下面显示交流的信息 -->
          <div class="down">
            <div class="communication">我已经在路上了，我马上送药到您家，请你稍等片刻。</div>
          </div>
        </div>
      </div>

    </div>

    <my-nav></my-nav>
  </div>
</template>

<script>
import MyNav from "@/components/MyNav";

export default {
  data() {
    return {
      message: localStorage.getItem("message"),
      mm: localStorage.getItem("mm"),
      dd: localStorage.getItem("dd"),
    };
  },
  components: {
    MyNav,
  },
  methods: {
    okk() {
      console.log("返回首页");
      this.$router.push({
        name: "index",
      });
    },
    toChatDetail() {
      this.$router.push({
        name: "chat",
      });
    },
    serverNotion() {
      this.$router.push({
        name: "daiQueDing",
      });
    },
    addFriend() {
      this.$router.push({
        name: "addFriend",
      });
    },
  },
};
</script>

<style scoped>
.avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50px;
  background: blanchedalmond;
  margin-right: 3%;
}
::placeholder {
  color: #fff;
  font-size: 0.9em;
}
.messageCenter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-bottom:0.01rem solid gray */
}
.messageCenter .text {
  margin-bottom: 3%;
  text-align: center;
  margin-top: 0.35rem;
}
.messageCenter .back {
  font-size: 0.6rem;
  margin-left: 4%;
  color: #797979;
}
.messageCenter .text {
  font-size: 0.45rem;
}
.messageCenter .person {
  font-size: 0.6rem;
  margin-right: 4%;
  color: #ddd4d4;
}
.iconfont {
  font-size: 0.6rem;
}
.search {
  background: #fff;
  margin: 3%;
  text-align: center;
}
.search .input {
  background: rgb(143, 210, 143);
  /* margin: 3%; */
  border-radius: 90px;
  height: 1rem;
  text-indent: 1em;
  width: 98%;
  color: #fff !important;
  text-align: left;
  border: 0.001rem solid gray;
  font-size: 0.38rem;
}
.liaotian {
  margin-left: 2%;
  text-align: center;
}
.inurse {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 2%;
  border-bottom: 0.001rem solid rgb(233, 221, 221);
  /* margin-top:5%; */
  width: 100%;
}

.inurse .left-icon .iconfont {
  font-size: 1.5rem;
}

.inurse .right-text .up {
  margin: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.45rem;
}
.up .name {
  font-size: 0.4rem;
}
.up .time {
  font-size: 0.35rem;
  color: rgb(206, 206, 206);
}
.down .communication {
  color: rgb(206, 206, 206);
  text-align: justify;
  margin-right: 2%;
}
</style>
